<template>
	<view class="login-container">
		<view class="login-header">
			<text class="title">欢迎登录</text>
			<view class="login-type">
				<text :class="['type-item', !isSmsLogin && 'active']" @click="switchLoginType(false)">
					密码登录
				</text>
				<text class="split">|</text>
				<text :class="['type-item', isSmsLogin && 'active']" @click="switchLoginType(true)">
					短信登录
				</text>
			</view>
		</view>

		<u--form :model="form" :rules="rules" ref="loginForm">
			<!-- 手机号输入 -->
			<u-form-item prop="phone" borderBottom>
				<u--input v-model="form.phone" placeholder="请输入手机号" border="none" clearable>
					<template #prefix>
						<text class="prefix-text">+86</text>
					</template>
				</u--input>
			</u-form-item>

			<!-- 密码/验证码输入 -->
			<u-form-item v-if="!isSmsLogin" prop="password" borderBottom>
				<u--input v-model="form.password" placeholder="请输入密码" border="none" password clearable></u--input>
			</u-form-item>

			<u-form-item v-else prop="code" borderBottom>
				<u--input v-model="form.code" placeholder="请输入验证码" border="none" clearable></u--input>
				<u-button slot="right" @click="sendSmsCode" :disabled="codeBtnDisabled" size="mini" type="primary"
					plain>
					{{ codeBtnText }}
				</u-button>
			</u-form-item>

			<u-form-item v-if="!isSmsLogin" prop="ucode" borderBottom>
				<u--input v-model="form.ucode" style="width: 120px; " placeholder="请输入验证码" border="none"
					clearable></u--input>

				<view style="width: 35%; height: 45px; float: left;  background-color: bisque;">
					<image style="height: 100%; width: 100%;" :src="image"></image>
				</view>
			</u-form-item>




		</u--form>

		<!-- 登录按钮 -->
		<u-button type="primary" shape="circle" @click="handleLogin" :loading="loading" class="login-btn">
			登录
		</u-button>

		<!-- 底部链接 -->
		<view class="footer-links">
			<text class="link-text" @click="navigateToRegister">立即注册</text>
			<text class="link-text" @click="navigateToForget" v-if="!isSmsLogin">
				忘记密码
			</text>
		</view>
	</view>
</template>

<script>
import { test } from '@/api/test.js'
export default {
	data() {
		return {
			isSmsLogin: false, // 是否短信登录
			loading: false, // 登录加载状态
			codeBtnDisabled: false, // 验证码按钮禁用状态
			codeBtnText: '获取验证码', // 验证码按钮文字
			countdown: 60, // 验证码倒计时
			form: {
				phone: '',
				password: '',
				code: '',
				ucode: '',
			},
			key: '',
			image: '',
			rules: {
				phone: [
					{
						required: true,
						// pattern: /^1[3-9]\d{9}$/,
						message: '请输入账号',
						trigger: ['blur', 'change']
					}
				],
				password: [{
					required: true,
					message: '请输入密码',
					trigger: ['blur', 'change']
				}],
				code: [{
					required: true,
					message: '请输入验证码',
					trigger: ['blur', 'change']
				}],
				ucode: [{
					required: true,
					message: '请输入验证码',
					trigger: ['blur', 'change']
				}]
			}
		}
	},
	mounted() {
		this.test1();
	},
	methods: {
		// 切换登录方式
		switchLoginType(isSms) {
			this.isSmsLogin = isSms
			this.$refs.loginForm.clearValidate()
		},
		test1() {

			test().then(res => {
				console.log(res)
				// this.image = "data:image/png;base64," + res.data.base64;
			})
		},

		// 发送短信验证码
		async sendSmsCode() {
			try {
				await this.$refs.loginForm.validateField('phone')

				// 调用发送验证码接口
				this.codeBtnDisabled = true
				this.codeBtnText = `${this.countdown}s后重新获取`

				const timer = setInterval(() => {
					this.countdown--
					this.codeBtnText = `${this.countdown}s后重新获取`
					if (this.countdown <= 0) {
						clearInterval(timer)
						this.codeBtnDisabled = false
						this.codeBtnText = '获取验证码'
						this.countdown = 60
					}
				}, 1000)

				// 实际应调用API
				// await this.$api.sendSmsCode(this.form.phone)
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				})

			} catch (error) {
				console.log('验证码发送失败:', error)
			}
		},

		// 处理登录
		async handleLogin() {
			try {
				await this.$refs.loginForm.validate()
				this.loading = true

				// 登录逻辑
				const params = this.isSmsLogin ?
					{
						userPhone: this.form.phone,
						code: this.form.code
					} :
					{
						userAcc: this.form.phone,
						userPwd: this.form.password,
						code: this.form.ucode,
						uuid: this.key
					};

				if (!this.isSmsLogin) {
					// console.log(params);

					const response = await login(params);
					
					try {
            console.log(response, 123)
						uni.setStorageSync('token', response.data.token);
            uni.setStorageSync('userId', response.data.login.userId);
					} catch (e) {
						console.log('存入缓存错误', e);
					}
					console.log(response, 1234)
				}


				// 调用登录接口
				// await this.$api.login(params)
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})

			
				uni.switchTab({
					url: '/pages/main/main'
				})

			} catch (error) {
				console.log('登录失败:', error)
			} finally {
				this.loading = false
			}
		},

		// 跳转注册页面
		navigateToRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			})
		},

		// 跳转忘记密码
		navigateToForget() {
			// uni.navigateTo({
			// 	url: '/pages/forget-password/index'
			// })
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	padding: 60rpx 40rpx;

	.login-header {
		margin-bottom: 80rpx;

		.title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
		}

		.login-type {
			margin-top: 30rpx;
			display: flex;
			align-items: center;

			.type-item {
				font-size: 32rpx;
				color: #999;
				padding: 0 20rpx;

				&.active {
					color: #2979ff;
					font-weight: bold;
				}
			}

			.split {
				color: #ddd;
			}
		}
	}

	.prefix-text {
		margin-right: 20rpx;
		color: #666;
	}

	.login-btn {
		margin-top: 60rpx;
		height: 90rpx;
	}

	.footer-links {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;

		.link-text {
			color: #2979ff;
			font-size: 28rpx;
		}
	}
}
</style>